<template>
  <SkeletonLoading v-if="initLoading" />
  <div class="income-module" v-else>
    <div class="income-wrapper">
      <div class="income">
        <div class="income-top flex-row">
          <div class="top-left flex-col">
            <view class="name flex-row">
              总收入
              <ve-tooltip :placement="'bottom-start'">
                <template #content>
                  <view>1、总收入为短租订单、违章代办费、<br />借调（借出）、车辆处置费之和</view>
                  <view>2、取符合筛选条件的短租订单下包含的所有费项</view>
                </template>
                <ve-icon class="headertip" name="headertip" size="28" />
              </ve-tooltip>
            </view>
            <CardTotal :value="summaryData.totalAmount" unit="元" thousandth color="white" />
          </div>
          <div class="top-right flex-col">
            <!-- <CardRate mode="vertical" :tb="summaryData.lastYearRate" :hb="summaryData.lastCycleRate" /> -->
          </div>
        </div>
        <div class="income-bottom flex-row">
          <div class="income-bottom-item flex-col" v-for="(item, index) in summaryData.revenueList" :key="index" @click="goAnchorFn(item)">
            <div class="flex-col" style="align-items: flex-start; width: 100%">
              <view class="name flex-row mb14">
                {{ item.name }}
                <ve-tooltip :placement="getTagQuestion(item.type).placement">
                  <template #content>
                    <view v-for="i in getTagQuestion(item.type).tooltip" :key="i">
                      <div v-html="i"></div>
                    </view>
                  </template>
                  <ve-icon class="headertip" name="headertip" size="28" />
                </ve-tooltip>
              </view>
              <CardTotal :value="item.totalAmount" unit="元" thousandth color="white" />
              <!-- <CardRate mode="whiteColor" :tb="item.lastYearRate" :hb="item.lastCycleRate" /> -->
              <div class="flex-row text mb8" v-if="item.type != 5"> 已结算：{{ formatNumber(item.totalSettlementAmount) }}元 </div>
              <div class="flex-row text" v-if="item.type != 5"> 待结算：{{ formatNumber(item.totalWaitSettlementAmount) }}元 </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <CardWrap title="订单数统计" :empty="orderStatisticsData?.orderCountList.length == 0">
      <!-- :rate="{ tb: item.lastYearRate, hb: item.lastCycleRate }" -->
      <card
        :icon="getTagOrderCount(item.type).icon"
        :title="item.name"
        v-for="(item, index) in orderStatisticsData?.orderCountList"
        :key="index"
      >
        <template #tooltip v-if="getTagOrderCount(item.type).tooltip">
          <div style="width: 360rpx; white-space: pre-wrap" v-html="getTagOrderCount(item.type).tooltip"></div>
        </template>
        <CardTotal :value="item.count" unit="单" />
      </card>
    </CardWrap>

    <CardWrap title="订单收入明细" :empty="orderStatisticsData?.orderFeeItemList.length == 0" id="feeStatistics">
      <CardAlert style="display: flex; align-items: flex-start">
        1、统计符合筛选条件下订单包含的全部费用
        <br />2、订单收入=订单租金+其他费用，同时还根据费用类型统计了订单收入中线上及线下费用的总额<br />
        3、将订单收入中的重点费项单独统计，包含保险费、车损费、油电费及续租费
      </CardAlert>
      <!-- :rate="{ tb: item.lastYearRate, hb: item.lastCycleRate }" -->
      <card
        :icon="getTagOrderFee(item.type).icon"
        :title="item.name"
        v-for="item in orderStatisticsData?.orderFeeItemList"
        :key="item.type"
      >
        <template #tooltip v-if="getTagOrderFee(item.type).tooltip">
          <div
            style="width: 360rpx; white-space: pre-wrap"
            v-html="
              item.name == '油电费总计' || item.name == '车损总计'
                ? getTagOrderFee(item.type).tooltip +
                  (item.extendParams.length ? '，手动配置的费项包含：' + item.extendParams.toString() : '')
                : getTagOrderFee(item.type).tooltip
            "
          ></div>
        </template>
        <CardTotal :value="item.totalAmount" unit="元" />
        <template #footer>
          <div v-if="item.childrenList?.length">
            <ve-gap size="4"></ve-gap>
            <CardCell
              v-for="(project, i) in item.childrenList"
              :key="i"
              class="text-lable"
              :label="project.name"
              :value="project.totalAmount"
              color="black"
            >
              <template #tooltip v-if="project && project.name == '不计免赔'">
                <div style="width: 360rpx; white-space: pre-wrap">{{
                  '不计免赔+保险升级+手动配置的费项之和' +
                  (project.extendParams.length ? '，手动配置的费项包含：' + project.extendParams.toString() : '')
                }}</div>
              </template>
            </CardCell>
            <span
              class="btns flex-row"
              @click.stop="goConfigFn('1')"
              v-if="item.type == 1 && permissions.includes('svmsapp:revenue.insurance')"
              >保险费配置 <ve-icon name="arrow_right_1" size="24" />
            </span>
            <span class="btns" @click.stop="goConfigFn('2')" v-if="item.type == 2 && permissions.includes('svmsapp:revenue.car')"
              >车损费配置 <ve-icon name="arrow_right_1" size="24"
            /></span>
            <span class="btns" @click.stop="goConfigFn('3')" v-if="item.type == 3 && permissions.includes('svmsapp:revenue.oil')"
              >油电费配置 <ve-icon name="arrow_right_1" size="24"
            /></span>
          </div>
          <div v-else>
            <span
              class="btns"
              @click.stop="goConfigFn('1')"
              style="margin-left: 0"
              v-if="item.type == 1 && permissions.includes('svmsapp:revenue.insurance')"
              >保险费配置 <ve-icon name="arrow_right_1" size="24"
            /></span>
            <span
              class="btns"
              @click.stop="goConfigFn('2')"
              style="margin-left: 0"
              v-if="item.type == 2 && permissions.includes('svmsapp:revenue.car')"
              >车损费配置 <ve-icon name="arrow_right_1" size="24"
            /></span>
            <span
              class="btns"
              @click.stop="goConfigFn('3')"
              style="margin-left: 0"
              v-if="item.type == 3 && permissions.includes('svmsapp:revenue.oil')"
              >油电费配置 <ve-icon name="arrow_right_1" size="24"
            /></span>
          </div>
        </template>
      </card>
    </CardWrap>

    <CardWrap
      title="订单渠道数据统计"
      :empty="orderStatisticsData?.channelOrderList.length == 0"
      :description="'根据您的筛选统计数据时发现渠道无数据，请重新筛选'"
    >
      <card :icon="getTagOrderChannel(item.type).icon" v-for="(item, index) in channelOrderList" :key="item.type" :title="item.name">
        <CardCell label="收入" :value="item.totalAmount" />
        <CardCell label="抽佣" :value="item.commissionAmount" />
        <CardCell label="净收入" :value="item.totalProfitAmount">
          <template #tooltip v-if="index == 0">
            <div style="width: 360rpx; white-space: pre-wrap">
              1、净收入=订单总额-抽佣总额<br />
              2、此处取符合筛选条件订单下包含的所有费用总额-抽佣总额
            </div>
          </template>
        </CardCell>
        <CardCell label="有效订单数" :value="item.count" unit="单">
          <template #tooltip v-if="index == 0">
            <div style="width: 360rpx; white-space: pre-wrap">
              1、门店为取车门店的订单总数<br />
              2、订单状态取：待排车、待用车、用车中、已还车、已完成
            </div>
          </template>
        </CardCell>
      </card>
      <!-- 折叠 -->
      <CardFold ref="cardFoldRef1" @change="handleChange($event, 'channel')" v-if="orderStatisticsData?.channelOrderList?.length > 6" />
    </CardWrap>

    <CardWrap
      title="订单-取车门店数据统计"
      :empty="orderStatisticsData?.siteList.length == 0"
      :description="'根据您的筛选统计数据时发现门店暂无数据，请重新筛选'"
    >
      <card icon="rs_store" v-for="(item, index) in siteList" :key="index" :title="item.name">
        <!-- 问号内容仅展示第一个门店，后续无需重复展示 -->
        <CardCell label="净收入" :value="item.totalProfitAmount">
          <template #tooltip v-if="index == 0">
            <div style="width: 360rpx; white-space: pre-wrap">
              1、净收入=订单总额-抽佣总额<br />
              2、此处取符合筛选条件订单下包含的所有费用总额-抽佣总额
            </div>
          </template>
        </CardCell>
        <CardCell label="有效订单数" :value="item.count" unit="单">
          <template #tooltip v-if="index == 0">
            <div style="width: 360rpx; white-space: pre-wrap">
              1、门店为取车门店的订单总数<br />
              2、订单状态取：待排车、待用车、用车中、已还车、已完成
            </div>
          </template>
        </CardCell>
      </card>
      <!-- 折叠，增加click或者@change事件 -->
      <CardFold ref="cardFoldRef2" @change="handleChange($event, 'store')" v-if="orderStatisticsData?.siteList?.length > 6" />
    </CardWrap>

    <CardWrap title="订单财务统计" :empty="orderStatisticsData?.billList.length == 0">
      <template #tooltip>
        <div style="width: 360rpx; white-space: pre-wrap"> 财务统计=收款+付款，付款以正数同收款相加 </div>
      </template>
      <card
        :icon="getTagOrderBill(item.type).icon"
        v-for="(item, index) in orderStatisticsData?.billList"
        :key="index"
        class="order-card channel-card"
        :title="item.name"
      >
        <CardTotal :value="item.totalAmount" />
      </card>
    </CardWrap>

    <CardWrap title="订单维度下费用及订单数统计">
      <template #extra>
        <span @click="handleClick()" class="btn">统计说明</span>
      </template>
      <ve-line color="#DADBDD" style="width: 100%" />
      <view class="btns-view">
        <view class="btns-view__item" @click="handelLandscape(shortOrderProfitStatisticsData, 'order')">
          <ve-icon name="landscape" size="24" class="btns-view__item-icon" />
          <text class="btns-view__item-text">横屏查看</text>
        </view>
        <remote-select
          class="btns-view__item"
          :class="{ active: channelType.length }"
          type="dict"
          multiple
          :slotStatus="true"
          v-model="channelType"
          title="选择渠道"
          :outData="dict.channelTypeEnums"
          @change="getShortOrderProfitStatistics"
        >
          <template #remote-select>
            <view class="items-center">
              <ve-icon v-if="channelType.length" name="filterwhite" size="24" class="btns-view__item-icon" />
              <ve-icon v-else name="filtergray" size="24" class="btns-view__item-icon" />
              <text class="btns-view__item-text">{{ channelType.length ? '已选渠道' : '全部渠道' }}</text>
              <view class="badge" v-show="channelType.length">{{ `+${channelType.length}` }}</view>
            </view>
          </template>
        </remote-select>
      </view>
      <!-- 订单维度下费用及订单数统计 -->
      <OrderChart.PortraitChart
        :echartData="shortOrderProfitStatisticsData"
        @getShawBarInfo="getShawBarInfo($event, shortOrderProfitStatisticsData, 'shortOrderProfitStatistics')"
        v-if="dayNum > 1"
      />
      <OrderChart.PieChart :echartData="shortOrderProfitStatisticsData[0]" v-if="dayNum == 1" />
    </CardWrap>

    <CardWrap title="费用生成时间或结算时间统计订单费用">
      <template #extra>
        <span @click="handleClick('fee')" class="btn">统计说明</span>
      </template>
      <ve-line color="#DADBDD" style="width: 100%" />
      <view class="btns-view">
        <view class="btns-view__item" @click="handelLandscape(shortOrderFeeProfitStatisticsData, 'cost')">
          <ve-icon name="landscape" size="24" class="btns-view__item-icon" />
          <text class="btns-view__item-text">横屏查看</text>
        </view>
        <remote-select
          class="btns-view__item"
          :class="{ active: channelTypeFee.length }"
          type="dict"
          multiple
          :slotStatus="true"
          v-model="channelTypeFee"
          :outData="dict.channelTypeEnums"
          title="选择渠道"
          @change="getShortOrderFeeProfitStatistics"
        >
          <template #remote-select>
            <view class="items-center">
              <ve-icon v-if="channelTypeFee.length" name="filterwhite" size="24" class="btns-view__item-icon" />
              <ve-icon v-else name="filtergray" size="24" class="btns-view__item-icon" />
              <text class="btns-view__item-text">{{ channelTypeFee.length ? '已选渠道' : '全部渠道' }}</text>
              <view class="badge" v-show="channelTypeFee.length">{{ `+${channelTypeFee.length}` }}</view>
            </view>
          </template>
        </remote-select>
        <view class="btns-view__item" style="border-color: #3072f6; background: #3072f6">
          <ve-picker-inline
            @change="getShortOrderFeeProfitStatistics"
            v-model="orderFeeQueryType"
            placeholder="请选择"
            :slotStatus="true"
            :range="dict.orderFeeQueryTypeEnums"
          >
            <template #picker-line>
              <view class="btns-view__item-picker">
                <text>{{ orderFeeQueryTypeLabel }}</text>
                <ve-icon name="rs_right_white" width="15" height="24" class="picker-icon" />
              </view>
            </template>
          </ve-picker-inline>
        </view>
      </view>
      <!-- 费用生成时间或结算时间统计订单费用 -->
      <CostChart.PortraitChart
        v-if="dayNum > 1"
        :echartData="shortOrderFeeProfitStatisticsData"
        @getShawBarInfo="getShawBarInfo($event, shortOrderFeeProfitStatisticsData, 'shortOrderFeeProfitStatistics')"
      />
      <OrderChart.PieChart :echartData="shortOrderFeeProfitStatisticsData[0]" :timeData="orderFeeQueryType" v-if="dayNum == 1" />
    </CardWrap>
    <dataModal :data="modalData" ref="dataModalRef" :index="modalIndex" :orderFeeQueryType="orderFeeQueryType" :type="modalType" />
    <!-- 统计说明 -->
    <ve-modal title="统计说明" v-model:model-value="statisticsVisable" @confirm="statisticsVisable = false" :showCancel="false">
      <view class="statistics-content" v-for="(item, index) in statisticsContent" :key="index">
        {{ item }}
      </view>
    </ve-modal>
  </div>
</template>
<script setup>
  import { onMounted, onUnmounted, ref, computed } from 'vue'
  import card from '../components/card/index.vue'
  import CardWrap from '../components/card/card-wrap.vue'
  import CardTotal from '../components/card/card-total.vue'
  import CardCell from '../components/card/card-cell.vue'
  import CardAlert from '../components/card/card-alert.vue'
  import CardFold from '../components/card/card-fold.vue'
  import CardRate from '../components/card/card-rate.vue'
  import SkeletonLoading from '../components/skeleton-loading.vue'
  import { revenueStatistics, orderStatistics, shortOrderProfitStatistics, shortOrderFeeProfitStatistics } from '@/api/home/revenue'
  import { formatNumber } from '@/utils/index'
  import dayjs from 'dayjs'
  import dataModal from '../components/data-modal-income.vue'
  import OrderChart from '../components/echarts/order'
  import CostChart from '../components/echarts/cost'
  import { usePageDict } from '@/hooks/useDict'
  import { userStore } from '@/stores'
  import { useNavigate } from '../components/echarts/utils'
  const dict = usePageDict('revenueSummary')
  const userInfoStore = userStore()
  const permissions = userInfoStore.permissons
  const { navigateTo } = useNavigate()

  const initLoading = ref(true)
  const dayNum = ref(0)
  const summaryData = ref({})
  const orderFeeQueryType = ref(11)
  // 获取筛选数据
  const basicQueryParam = ref({})

  const props = defineProps({
    refreshUpdateTime: {
      type: Function,
      default: () => {},
    },
  })

  const cardFoldRef1 = ref()
  const cardFoldRef2 = ref()
  const loadData = (params = {}) => {
    basicQueryParam.value = params
    const queryParam = {
      siteIdList: params.siteIdList,
      orderTimeQueryType: params.orderTimeQueryType,
      startTime: params.startTime,
      endTime: params.endTime,
      selectDateType: params.selectDateType,
    }
    // 判断时间是否存在
    if (params.startTime && params.endTime) {
      let { startTime, endTime } = params
      dayNum.value = dayjs(endTime).diff(dayjs(startTime), 'day') + 1
    }
    console.log('dayNum', dayNum.value)
    getShortOrderProfitStatistics()
    getShortOrderFeeProfitStatistics()
    getRevenueStatistics(queryParam)
    getOrderStatistics(queryParam)

    cardFoldRef1.value?.handleFold(true)
    cardFoldRef2.value?.handleFold(true)
  }
  // 总收入汇总
  const getRevenueStatistics = (queryParam) => {
    revenueStatistics(queryParam).then((res) => {
      const result = res.result || {}
      summaryData.value = result
      // 更新数据更新时间
      props.refreshUpdateTime(res.result.lastUpdateTime)
    })
  }

  // 订单统计
  const orderStatisticsData = ref({})
  const siteList = ref([])
  const channelOrderList = ref([])

  const getOrderStatistics = (queryParam) => {
    orderStatistics(queryParam).then((res) => {
      const result = res.result || {}
      orderStatisticsData.value = result
      siteList.value = orderStatisticsData.value?.siteList.slice(0, 6)
      channelOrderList.value = orderStatisticsData.value?.channelOrderList.slice(0, 6)
      initLoading.value = false
      uni.hideLoading()
    })
  }

  // 0:总收入 1:短租 2:长租 3: 违章 4:车辆借出 5:车辆处置
  const getTagQuestion = (type) => {
    const tagItem = {
      1: {
        name: '订单收入',
        tooltip: [
          '1、订单收入：订单费项总额之和，不包含<br />违章费及押金',
          '2、订单状态取：待排车、待用车、用车中',
          '已还车、已完成，已取消',
          '3、结算状态取：待结算、部分结算、',
          '结算中、已结算',
        ],
        placement: 'bottom-start',
      },
      3: {
        name: '违章代办收入',
        tooltip: ['1、违章代办收入=代办费用-', '违章代办真实成本', '2、费用状态取：未收付款、', '已收付款、已驳回'],
        placement: 'bottom-end',
      },
      4: {
        name: '车辆借出收入',
        tooltip: ['1、车辆借出收入=借出费用', '+借调附加费', '2、费用状态取：未收付款、', '已收付款、已驳回'],
        placement: 'bottom-start',
      },
      5: {
        name: '车辆处置费',
        tooltip: ['车辆处置费为操作处置时填写的', '出售金额或补贴金额'],
        placement: 'bottom-end',
      },
    }
    return tagItem[type] || { name: '', tooltip: [], placement: '' }
  }
  // type: 0, name: "有效订单数",type: 2, name: "渠道有效订单数",type: 1, name: "线下有效订单数",
  const getTagOrderCount = (type) => {
    const tagItem = {
      0: {
        tooltip: '订单状态取：待排车、待用车、用车中、已还车、已完成，已取消的订单不计算在内',
        icon: 'rs_dd',
      },
      1: {
        tooltip: '',
        icon: 'rs_xxdd',
      },
      2: {
        tooltip: '',
        icon: 'rs_qd',
      },
    }
    return tagItem[type] || { tooltip: '', icon: '' }
  }

  // type: 5, name: "订单租金",type: 6, name: "其他费用", type: 7, name: "线上费用",
  // type: 4, name: "线下费用",type: 1, name: "保险费用总计",type: 2, name: "车损总计",
  // type: 3, name: "油电费总计",type: 8, name: "续租费总计",
  const getTagOrderFee = (type) => {
    const tagItem = {
      5: {
        icon: 'rs_price1',
        tooltip:
          '1、订单租金：符合筛选条件订单下的车辆租金、手续费、保险费之和，也包含续租产生的车辆租金、手续费、保险费<br />2、保险费包含基础保险和不计免赔，不计免赔的具体费项支持配置<br />3、订单状态取：待排车、待用车、用车中、已还车、已完成、已取消<br />4、结算状态取：待结算、部分结算、结算中、已结算',
      },
      6: {
        icon: 'rs_price1',
        tooltip:
          '1、其他费用：除车辆租金、手续费、保险费之外所有的费项都为其他费用<br />2、订单状态取：待排车、待用车、用车中、已还车、已完成，已取消<br />3、结算状态取：待结算、部分结算、结算中、已结算<br />3、结算状态取：待结算、部分结算、结算中、已结算<br />4、其他费用=收款费项-付款费项',
      },
      7: {
        icon: 'rs_price1',
        tooltip: '',
      },
      4: {
        icon: 'rs_price1',
        tooltip: '',
      },
      1: {
        icon: 'income-insurance',
        tooltip: '',
      },
      2: {
        icon: 'income-car',
        tooltip: '车损费=车损费用+配置的相关费用之和',
      },
      3: {
        icon: 'income-oil',
        tooltip: '油电费=油电费用+配置的相关费用之和',
      },
      8: {
        icon: 'income-zu',
        tooltip: '',
      },
    }
    return tagItem[type] || { content: [] }
  }
  // 2:悟空,3:哈啰,1:携程,-1:飞猪,-2:滴滴,-3:铁行,-4:飞租 0：自营
  const getTagOrderChannel = (type) => {
    const tagItem = {
      0: {
        icon: 'channel_zy',
      },
      1: {
        icon: 'channel_xc',
      },
      3: {
        icon: 'channel_hl',
      },
      2: {
        icon: 'channel_wk',
      },
      '-4': {
        icon: 'channel_fzz',
      },
      '-3': {
        icon: 'channel_tx',
      },
      '-2': {
        icon: 'channel_dd',
      },
      '-1': {
        icon: 'channel_fz',
      },
      999: {
        icon: 'channel_other',
      },
    }
    return tagItem[type] || { icon: 'channel_other' }
  }
  // type: 1, name: "已结算",type: 2, name: "待结算",type: 3, name: "已对账",type: 4, name: "未对账",
  const getTagOrderBill = (type) => {
    const tagItem = {
      1: {
        icon: 'income-settled',
      },
      2: {
        icon: 'income-account',
      },
      3: {
        icon: 'income-reconciliation',
      },
      4: {
        icon: 'income-account',
      },
    }
    return tagItem[type] || { content: [] }
  }
  const goConfigFn = (type) => {
    uni.navigateTo({
      url: '/pages/revenue-summary/components/config-modal?type=' + type,
    })
  }

  const handleChange = (args, type) => {
    console.log(args, type)
    if (type == 'store') {
      if (args) {
        siteList.value = orderStatisticsData.value?.siteList.slice(0, 6)
      } else {
        siteList.value = orderStatisticsData.value?.siteList
      }
    }
    if (type == 'channel') {
      if (args) {
        channelOrderList.value = orderStatisticsData.value?.channelOrderList.slice(0, 6)
      } else {
        channelOrderList.value = orderStatisticsData.value?.channelOrderList
      }
    }
  }
  const statisticsVisable = ref(false)
  const statisticsContent = ref([])
  const handleClick = (type) => {
    let content = [
      ' 1、最多展示90天数据，如有需要可更精准的筛选时间',
      '2、根据订单的取值时间（取车或还车），统计订单下包含的所有费用以及结算情况，如根据实际还车时间筛选订单，则将订单所有费用统计在实际还车这一天',
      '3、订单数：为当天订单状态为待排车、待用车、用车中、已还车、已完成的订单总数',
    ]
    if (type == 'fee') {
      content = [
        '1、最多展示90天数据，如有需要可更精准的筛选时间',
        '2、选择费用生成时间统计时，则统计费用生成时间在时间筛选范围内的所有结算状态的费用',
        '3、选择费用结算时间统计时，则统计费用结算时间在时间筛选范围内已结算的费用',
        '4、已结算的费用包含：已结算、结算中、部分结算下实结金额之和',
      ]
    }
    statisticsVisable.value = true
    statisticsContent.value = content
  }

  // 订单维度下费用及订单数统计
  const shortOrderProfitStatisticsData = ref([])
  const channelType = ref([])
  const getShortOrderProfitStatistics = () => {
    const param = {
      ...basicQueryParam.value,
      channelTypes: channelType.value,
    }
    shortOrderProfitStatistics(param).then((res) => {
      const result = res.result || {}
      shortOrderProfitStatisticsData.value = result.data || []
    })
  }

  // 切换横屏
  const handelLandscape = (data, type) => {
    navigateTo({
      chartType: type,
      echartData: data,
    })
  }

  const channelTypeFee = ref([])
  const shortOrderFeeProfitStatisticsData = ref([])
  // 根据费用生成时间或结算时间统计订单费用
  const getShortOrderFeeProfitStatistics = () => {
    shortOrderFeeProfitStatisticsData.value = []
    const param = {
      ...basicQueryParam.value,
      channelTypes: channelTypeFee.value,
      orderFeeQueryType: orderFeeQueryType.value,
    }
    shortOrderFeeProfitStatistics(param).then((res) => {
      const result = res.result || {}
      shortOrderFeeProfitStatisticsData.value = result.data || []
    })
  }
  const orderFeeQueryTypeLabel = computed(() => {
    return dict?.orderFeeQueryTypeEnums?.find((item) => item.value == orderFeeQueryType.value)?.label || ''
  })

  const modalData = ref({})
  const modalIndex = ref(0)
  const modalType = ref('')
  const dataModalRef = ref(null)
  // 获取数据
  const getShawBarInfo = (e, data, type) => {
    modalData.value = data
    modalIndex.value = e.clickIndex
    modalType.value = type
    dataModalRef.value.open()
  }

  const goAnchorFn = (item) => {
    if (item.type == 1) {
      const query = uni.createSelectorQuery()
      query
        .select('#feeStatistics')
        .boundingClientRect((data) => {
          uni.pageScrollTo({
            scrollTop: data.top - 100,
            duration: 300,
          })
        })
        .exec()
    }
  }

  // 添加事件监听
  onMounted(() => {
    uni.$on('updateRevenueSummary', () => {
      const queryParam = {
        ...basicQueryParam.value,
      }
      getRevenueStatistics(queryParam)
      getOrderStatistics(queryParam)
      cardFoldRef1.value?.handleFold(true)
      cardFoldRef2.value?.handleFold(true)
    })
  })

  // 组件销毁时移除事件监听
  onUnmounted(() => {
    uni.$off('updateRevenueSummary')
  })

  defineExpose({
    loadData,
  })
</script>
<style lang="less" scoped>
  .income-module {
    padding-bottom: 50rpx;
    overflow-x: hidden;
  }
  .flex-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .text-lable {
    font-weight: 400;
    font-size: 24rpx;
    color: #1d2129;
    line-height: 34rpx;
  }
  .btns {
    justify-content: flex-start;
    font-weight: 400;
    font-size: 24rpx;
    color: #1890ff;
    line-height: 34rpx;
  }
  .btn {
    font-weight: 400;
    font-size: 24rpx;
    color: #3072f6;
    line-height: 34rpx;
  }
  :deep(.card-alert .notice-icon) {
    margin-top: 6rpx;
  }
  .btns-view {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10rpx;
    &__item {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2rpx solid #dadbdd;
      border-radius: 4px;
      font-weight: 400;
      font-size: 24rpx;
      color: #8491a8;
      padding: 8rpx 0;
      :deep(.ve-picker-trigger_unit) {
        display: none;
      }
      &-icon {
        margin-right: 8rpx;
      }
      .badge {
        height: 24rpx;
        line-height: 24rpx;
        font-size: 24rpx;
        margin-left: 8rpx;
        padding: 0 8rpx;
        color: #3072f6;
        background: #ffffff;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
      }
    }
  }
  .items-center {
    display: flex;
    align-items: center;
  }
  .active {
    border-color: #3072f6;
    color: #fff;
    background: #3072f6;
    .btns-view__item-icon {
      color: #fff;
    }
  }
  .card-empty {
    margin: 0 auto;
  }
  .income-wrapper {
    background: #ffffff;
    padding: 32rpx 24rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    .income {
      padding: 16rpx 24rpx 24rpx 24rpx;
      padding-bottom: 0;
      background-image: url('@/static/images/income-bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      .name {
        margin-bottom: 14rpx;
        .headertip {
          margin-left: 8rpx;
        }
      }
      .iconmg {
        margin-left: 2rpx;
        margin-right: 2rpx;
      }
      .text {
        line-height: 34rpx;
      }
      .mb14 {
        margin-bottom: 14rpx;
      }
      .mb8 {
        margin-bottom: 8rpx;
      }
      .income-top,
      .income-bottom {
        width: 100%;
        justify-content: flex-start;
        align-items: stretch;
        font-weight: 400;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 28rpx;
      }
      .income-top {
        padding-bottom: 24rpx;
        border-bottom: 2rpx solid #fff;
        .top-left {
          width: 70%;
          align-items: flex-start;
        }
        .top-right {
          width: 30%;
          align-items: flex-end;
        }
      }
      .income-bottom {
        flex-wrap: wrap;
        width: 100%;
        .income-bottom-item {
          box-sizing: border-box;
          width: 50%;
          align-items: flex-start;
          justify-content: flex-start;
          padding: 24rpx 24rpx 24rpx 0;
          border-bottom: 2rpx solid #fff;
          border-right: 2rpx solid #fff;
          &:nth-child(even) {
            border-right: none;
            padding-left: 24rpx;
            padding-right: 0;
          }
          &:nth-child(3) {
            border-bottom: none;
          }
          &:nth-child(4) {
            border-bottom: none;
          }
        }
      }
    }
  }
  .statistics-content {
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }
  .btns-view__item-picker {
    font-size: 24rpx;
    color: #fff;
    .picker-icon {
      transform: rotate(90deg);
      margin-left: 15rpx;
    }
  }
</style>
